<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

window.jsTestIsAsync = true;

</script>

<style>
div.class { background-color: red; }
:hover {background-color:blue; }
:target~#fourth { background-color: green; }
</style>

</head>
<body onhashchange="hashchange();">
<p id="description"></p>
<div tabindex=1" id="first" class="class"></div>
<div tabindex=2" id="second" class="class"></div>
<div tabindex=3" id="third" class="class"></div>
<div tabindex=4" id="fourth" class="class"></div>
<div id="console"></div>
<script>
description('This test passes if it finds an element whose id is "fourth" and has a sibling that comes before it and whose id matches the fragment of the url of this test.');


if (window.location.hash.indexOf("second") == -1)
    window.location.hash = "#second";

function hashchange() {
el = document.getElementById("first");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");

el = document.getElementById("second");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");

el = document.getElementById("third");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");

el = document.getElementById("fourth");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");
finishJSTest();
}
</script>
</body>
</html>
